<template>
  <div>
    <search-list ref="filmLibrary" :option="searchOpt" :api-url="$url.FilmList" :itemPerRow="3">
      <el-table-column prop="title" label="作品名称"></el-table-column>
      <el-table-column prop="category" label="作品类型"></el-table-column>
      <el-table-column prop="cover" label="封面">
        <template slot-scope="scope">
          <div class="cover">
            <img :src="scope.row.cover" />
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280px">
        <template slot-scope="scope">
          <el-button type="primary" @click="addWorks(scope.row)">添加这个</el-button>
        </template>
      </el-table-column>
    </search-list>
    <el-dialog title="添加作品" width="500px" :visible.sync="dialogShow" @close="clear">
      <el-form label-position="top">
        <div v-if="!confirmShow">
          <el-form-item prop="role" label="职务分类">
            <el-select v-model="team" placeholder="请选择">
              <el-option
                v-for="(item, index) in roleCate"
                :key="index"
                :label="item.dictValue"
                :value="item.dictValue"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="职务">
            <el-input
              v-model.trim="role"
              maxlength="30"
              show-word-limit
              @keypress.native="checkWord"
            ></el-input>
          </el-form-item>
          <el-form-item prop="playRole" label="饰演角色">
            <el-input
              v-model.trim="playRole"
              maxlength="30"
              show-word-limit
              @keypress.native="checkWord"
            ></el-input>
          </el-form-item>
        </div>
        <el-tag
          v-for="(tag, index) in tags"
          :key="index"
          effect="dark"
          type="warning"
          :closable="!confirmShow"
          @close="removeTag(tag)"
        >
          {{ tag }}
        </el-tag>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button icon="el-icon-check" @click="last" v-if="confirmShow">
          上一步
        </el-button>
        <el-button type="primary" @click="addRole" v-if="!confirmShow">添加职务</el-button>
        <el-button icon="el-icon-check" @click="next" v-if="!confirmShow">
          下一步
        </el-button>
        <el-button type="success" icon="el-icon-check" @click="save" v-else>
          确认添加
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        searchOpt: [
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'title',
            label: '作品名称',
          },
        ],
        form: {
          filmId: '',
          job: '',
          uid: '',
        },
        team: '',
        playRole: '',
        dialogShow: false,
        confirmShow: false,
        role: '',
        tags: [],
        tagList: [],
        roleCate: [],
      };
    },
    mounted() {
      this.getRole();
    },
    methods: {
      checkWord(e) {
        if (['-', '=', '/'].includes(e.key)) {
          this.$message.error('请不要输入- = /类似符号');
          return;
        }
      },
      next() {
        this.confirmShow = true;
      },
      last() {
        this.confirmShow = false;
      },
      getRole() {
        this.$service.JmDictList({ type: 4 }).then((res) => {
          this.roleCate = res;
        });
      },
      save() {
        if (this.tags.length == 0) {
          this.$message.error('至少输入一条职务数据哦~');
          return;
        }
        this.form.job = this.tags.join('/');
        this.$service
          .FilmUserSave({
            ...this.form,
          })
          .then((res) => {
            this.$message.success('添加成功');
            this.dialogShow = false;
            const uuid = this.form.uid;
            this.$router.push({ name: 'UserWorkList', params: { uuid } });
          });
      },
      addWorks(row) {
        this.form.filmId = row.id;
        this.form.uid = this.$route.params.uuid;
        this.dialogShow = true;
      },
      addRole() {
        if (this.team == '' || this.team == undefined) {
          this.$message.error('请选择职务分类');
          return;
        }
        if (this.role == '') {
          this.$message.error('职务不能为空');
          return;
        }
        if (this.role && this.playRole) {
          this.tags.push(this.team + '-' + this.role + '-' + this.playRole);
        } else {
          this.tags.push(this.team + '-' + this.role);
        }
      },
      removeTag(tag) {
        this.tags.splice(this.tags.indexOf(tag), 1);
      },
      dialogClose() {
        this.dialogShow = false;
      },
      clear() {
        this.dialogVisible = false;
        this.confirmShow = false;
        this.role = '';
        this.team = '';
        this.playRole = '';
        this.tags = JSON.parse(JSON.stringify(this.tagList));
      },
    },
  };
</script>
<style lang="less" scoped>
  .el-tag {
    margin-right: 10px;
    margin-bottom: 10px;
    height: auto;
    width: auto;
    word-break: normal;
    white-space: pre-wrap;
    word-wrap: break-word;
  }
  .cover {
    width: 100px;
    img {
      width: 100%;
      height: 100%;
    }
  }
</style>
